<template>
  <div class="container">
    <van-nav-bar :title="title" fixed class="titleStyle" left-arrow @click-left="onClickLeft" />
    <van-button class="saveBtn" type="primary" native-type="submit" @click="handleSubmit()">报工</van-button>
    <div class="publicBox formDivBox">
      <van-form ref="form">
        <van-field label="维保商" :value="ruleForm.maintainDealerName" readonly size="mini" />

        <van-field label="开始时间" name="startTime" :rules="[{ required: true, message: '请选择开始时间', trigger: 'blur' }]" v-model="ruleForm.startTime" size="mini" readonly @click="timeChange(1)" />

        <van-field label="结束时间" name="endTime" :rules="[{ required: true, message: '请选择结束时间', trigger: 'blur' }]" v-model="ruleForm.endTime" size="mini" readonly @click="timeChange(2)" />

        <div class="inputRightFont">
          <van-field label="维修工时" v-model="ruleForm.repairHours" :max="9999.99" style="width:93%; float: left;" type="number" placeholder="请输入数字" :formatter="formatter" :rules="[{ required: true, message: '请输入维修工时', trigger: 'blur' }]" />
          <span class="sp">小时</span>
        </div>
        <div class="inputRightFont">
          <van-field label="维修成本" :rules="[{ required: true, message: '请输入维修成本', trigger: 'blur' }]" v-model="ruleForm.repairCost" :max="99999999.99" style="width:93%; float: left;" type="number" placeholder="请输入数字" :formatter="formatter" />
          <span class="sp">元</span>
        </div>
        <van-field name="isSolve" label="是否解决">
          <template #input>
            <van-radio-group v-model="ruleForm.isSolve" direction="horizontal">
              <van-radio :name="1">是</van-radio>
              <van-radio :name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field v-model="ruleForm.faultAnalysis" placeholder="请输入故障分析" label="故障分析" rows="3" size="mini" type="textarea" maxlength="200" show-word-limit />
        <van-field v-model="ruleForm.repairMatters" placeholder="请输入维修事项" label="维修事项" rows="3" size="mini" type="textarea" maxlength="200" show-word-limit />
      </van-form>
    </div>
    <!--  时间选择 -->
    <van-popup v-model="showTime" position="bottom" :style="{ height: '30%' }">
      <van-datetime-picker v-model="currentDate" type="datetime" @confirm="onTimeChange" @cancel="showTime = false" />
    </van-popup>
  </div>
</template>
<script>
import { myFunction, computationTime } from '@/utils/function'
import vanFieldCheckbox from '@/components/selectUser'
export default {
  name: 'RepairRequest',
  components: { vanFieldCheckbox },
  data() {
    return {
      currentDate: new Date(),
      ruleForm: {
        faultAnalysis: '',
        repairMatters: '',
        repairCost: '',
        repairHours: '',
        startTime: '',
        endTime: ''
      },
      show: false,
      code: localStorage.getItem('code'),
      title: localStorage.getItem('name'),
      search: {
        current: 1,
        size: 5
      },
      list: [],
      loading: false,
      isLoading: false,
      detailsObj: {},
      showTime: false
    }
  },
  watch: {
    ruleForm: {
      deep: true,
      handler(row) {
        if (row) {
          if (computationTime(row.startTime, row.endTime) < 0) {
            row.endTime = ''
            this.$toast.fail('结束时间不能早于开始时间！')
          }
        }
      }
    }
  },
  created() {},
  mounted() {
    this.getData()
  },
  methods: {
    formatter(value) {
      return value.replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3')
    },
    async getData() {
      this.detailsObj = this.$store.state.data
      this.detailsObj.isSolve = 1
      setTimeout(() => {
        this.ruleForm = { ...this.ruleForm, ...this.detailsObj }
        /* 默认为系统当前时间 */
        this.ruleForm.endTime = myFunction(new Date())
        // 开始时间默认任务开始时间
        this.ruleForm.startTime = this.detailsObj.issuedTime
      })
    },
    timeChange(num) {
      this.nums = num
      this.showTime = true
    },
    /* 时间选择赋值 */
    onTimeChange(value) {
      console.log(value, this.nums, this.ruleForm)
      setTimeout(() => {
        if (this.nums === 1) {
          this.ruleForm.startTime = myFunction(value)
        } else {
          this.ruleForm.endTime = myFunction(value)
        }
        this.showTime = false
      }, 500)
    },
    handleSubmit() {
      this.$refs.form
        .validate()
        .then(() => {
          this.$dialog
            .confirm({
              title: '提示',
              message: '是否确认提交？'
            })
            .then(() => {
              this.submitApi()
            })
            .catch(() => {
              return false
            })
        })
        .catch(() => {})
    },
    submitApi() {
      const toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        message: '提交中...',
        forbidClick: true,
        loadingType: 'spinner'
      })
      this.$axios
        .post('/dobo-equip/repair/order/out/outConfirm', this.ruleForm)
        .then((res) => {
          if (res.data.code === 200) {
            toast.clear()
            this.$dialog
              .alert({
                title: '提示',
                message: '提交成功!'
              })
              .then(() => {
                this.$router.push('/externalRepair')
              })
              .catch(() => {})
          } else {
            this.$toast.fail(res.data.msg)
            setTimeout(() => {
              toast.clear()
              this.$router.push('/externalRepair')
            }, 1000)
          }
        })
        .catch(() => {})
    },
    // 返回
    onClickLeft() {
      const { query } = this.$route
      if (query.path) {
        this.$router.push(`/${query.path}`)
      } else {
        this.$router.push('/externalRepair')
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  .inputRightFont {
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    .sp {
      padding-left: 5px;
    }
  }
  .formDivBox {
    .van-field {
      border: 1px solid #f5f5f5;
    }
  }
}
</style>
<style lang='scss'>
</style>
